@charset "UTF-8";
/**
 * 
 * @authors 3pixel (kermit@piexl.net)
 * @date    2017-11-30 12:01:00
 * @version v0.0.1
 */
//ÒýÈë±äÁ¿
@import "variable.less";

//ÒýÈë»ìºÏº¯Êý
@import "mixins.less";

//ÇøÓò±êÌâ
.section-title{
	font-size:36px;
	color:#000;
	font-weight:normal;
	margin-bottom:1em;
	@media screen and (max-width:1270px){font-size:32px;}
	@media screen and (max-width:1024px){font-size:30px;}
	@media screen and (max-width:768px){font-size:28px;}
}

//Ïà¹Ø¶ÌÍ¾ÌåÑé
.com-experience{	
	padding:66px 0 90px 0;
	.img-link{display:block;}
	.com-exp-swiper-box{
		position:relative;
	}
	.com-exp-swiper{
		margin-left:-15px;
		margin-right:-15px;
	}
	.swiper-slide{
		padding:0 15px;
		padding-bottom:15px;
		.title{
			font-weight:normal;
			font-size:28px;
			line-height:1.2;
			color:#333;
			margin-bottom:0.5em;
			.text-overflow;
		}
		.tags{
			font-size:14px;
			color:#676767;
			padding:0.5em 0;
			i{padding-right:0.3em;}
			.tag{padding:0 0.5em;}
		}
		.detail{
			.text-overflow-lines(@line-num:2, @line-height:2em);
		}
		.link{
			display:inline-block;
			font-size:16px;
			line-height:1.5;
			padding:0.5em 2em;
			background-color:@red;
			color:#fff;
			&:hover{
				text-decoration:none;
				background-color:darken(@red, 5%);
			}
		}
		.text-area{
			width:430/570*100%;
			margin:0 auto;
			margin-top:-70px;
			position:relative;
			z-index:2;
			padding:30px;
			font-size:16px;
			line-height:2;
			color:#666;
			background-color:#fff;
			box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
		}
	}
	.exp-button-prev,.exp-button-next{
		position:absolute;
		cursor:pointer;
		top:50%;
		z-index:99;
		color:#666;
		//background-color:@red;
		width:2em;
		text-align:center;
		line-height:1;
		margin-top:-0.5em;
		i{font-size:40px;}
		&:hover{
			color:#000;
		}
		&.swiper-button-disabled{
			opacity:0.5;
			cursor:default;
			&:hover{color:#666;}
		}
	}
	.exp-button-prev{left:-40px;}
	.exp-button-next{right:-40px;}
	@media screen and (max-width:1270px){
		.exp-button-prev{left:0;}
		.exp-button-next{right:0;}
	}
	@media screen and (max-width:1024px){
		.com-exp-swiper{
			margin-left:-10px;
			margin-right:-10px;
		}
		.swiper-slide{
			padding:0 10px;
			.title{
				font-size:24px;
			}
			.tags{
				.tag{display:block;}
			}
			.link{font-size:14px;}
			.text-area{
				width:500/570*100%;
				margin-top:-50px;
				position:relative;
				z-index:2;
				padding:26px;
				font-size:14px;
			}
		}
	}
	@media screen and (max-width:1024px){
		padding:66*@rpx 0 90*@rpx 0;
	}
	@media screen and (max-width:640px){
		.com-exp-swiper{
			margin-left:0;
			margin-right:0;
		}
		.com-exp-swiper-box{
			padding-left:40px;
			padding-right:40px;
		}
		.swiper-slide{
			padding:0;
			padding-bottom:15px;
			.title{
				font-size:24px;
			}
			.link{font-size:14px;}
			.text-area{
				width:500/570*100%;
				margin-top:-50px;
				position:relative;
				z-index:2;
				padding:26px;
				font-size:14px;
			}
		}
	}
}

//¹ýÂËÆ÷
.com-filter{
	padding-bottom:80px;
	.filter-inner{
		@lineHeight:44px;
		display:inline-block;
		.filter-select{
			float:left;
			height:@lineHeight;
			line-height:@lineHeight;
			display:inline-block;
			font-size:16px;
			border:1px solid #e2e1e1;
			.border-radius(0);
			padding-left:1em;
			padding-right:1em;
			margin:0 5px;
			background-color:#fff;
			outline:0;
			width:210px;
			position:relative;
			&:first-child{margin-left:0;}
		}
		.btn{
			float:left;
			margin-left:5px;
			height:@lineHeight;
			line-height:@lineHeight;
			padding:0 2em;
			font-size:22px;
			border:0;
			.border-radius(0);
			background-color:@red;
			color:#fff;
		}
	}
	@media screen and (max-width:1024px){
		padding-bottom:40px;
		.filter-inner{
			@lineHeight:44px;
			display:inline-block;
			.filter-select{width:180px;}
			.btn{padding:0 1.5em; font-size:20px;}
		}
	}
	@media screen and (max-width:768px){
		.filter-inner{
			@lineHeight:44px;
			display:inline-block;
			.filter-select{
				font-size:14px;
				width:auto;
				height:36px;
				padding-right:2em;
				line-height:36px;
			}
			.btn{height:36px; line-height:36px; font-size:18px;}
		}
	}
	@media screen and (max-width:640px){
		width:100%;
		display:block;
		.filter-inner{
			@lineHeight:44px;
			display:inline-block;
			.filter-select{
				width:60%;
				margin-bottom:10px;
				margin-left:0;
				margin-right:4%;
			}
			.btn{width:36%; margin-left:0; margin-right:0;}
		}
	}
	@media screen and (max-width:480px){font-size:18px;}
}

//Ïà¹Øº½Ïß
.com-route{
	padding:66px 0 100px 0;
	.route-list{
		.item{
			@itemHeight:350px;
			width:100%;
			padding-left:370px;
			margin-bottom:84px;
			position:relative;
			height:@itemHeight;
			.item-img{
				max-width:500px;
				display:block;
				position:absolute;
				top:-25px;
				left:0;
			}
			.text-area{
				height:@itemHeight;
				padding-left:130px;
				background-color:#fff;
	  			box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
				.text-area-inner{
					padding:36px 50px;
				}
			}
			.title{
				font-size:32px;
				line-height:1;
				margin-bottom:0.7em;
				color:#181716;
				font-weight:normal;
				.text-overflow();
			}
			.describe{
				font-size:16px;
				line-height:1.75em;
				color:#666;
				.text-overflow-lines(3, 1.75em);
			}
			.tags{
				padding:1.5em 0;
				.tag{&:last-child{margin-bottom:0;}}
			}
			.tag{
				@lineHeight:24px;
				color:#181716;
				font-size:16px;
				padding-left:2em;
				position:relative;
				line-height:@lineHeight;
				margin-bottom:0.5em;
				&::before{
					content:'\e69d';
					font-family:"iconfont" !important;
					font-size:@lineHeight;
					position:absolute;
					top:50%;
					left:0;
					margin-top:-0.5em;
				}
				&.tag-clock{
					&::before{
						content:'\e69d';
					}
				}
				&.tag-address{
					&::before{
						content:'\e65f';
					}
				}
			}
			.route-price{
				color:#666;
				font-size:16px;
				line-height:1;
				.price{font-size:40px; position:relative; padding-left:16px;}
				.small{font-size:16px; position:absolute; top:0.5em; left:0;}
			}
		}
	}
	@media screen and (max-width:1270px){
		.route-list{
			.item{
				@itemHeight:300px;
				width:100%;
				padding-left:330px;
				margin-bottom:70px;
				height:@itemHeight;
				.item-img{
					width:430px;
				}
				.text-area{
					height:@itemHeight;
					padding-left:100px;
					.text-area-inner{
						padding:36px 50px;
					}
				}
				.title{
					font-size:30px;
					margin-bottom:0.5em;
				}
				.describe{
					font-size:14px;
					.text-overflow-lines(2, 1.75em);
				}
				.tags{
					padding:1.3em 0;
				}
				.tag{
					@lineHeight:20px;
					font-size:14px;
					line-height:@lineHeight;
					&::before{
						font-size:@lineHeight;
					}
				}
				.route-price{
					font-size:14px;
					.price{font-size:38px;padding-left:14px;}
					.small{font-size:14px;}
				}
			}
		}
	}
	@media screen and (max-width:1024px){
		.route-list{
			.item{
				width:100%;
				padding-left:250px;
				margin-bottom:50px;
				height:auto;
				.item-img{
					width:330px;
					top:-20px;
				}
				.text-area{
					height:auto;
					padding-left:80px;
					.text-area-inner{
						padding:30px 40px;
					}
				}
				.title{font-size:28px;}
				.describe{
					.text-overflow-lines(2, 1.75em);
				}
				.tags{
					padding:1em 0;
				}
				.route-price{
					.price{font-size:30px;}
					.small{font-size:14px;}
				}
			}
		}
	}
	@media screen and (max-width:768px){
		padding:66*@rpx 0 100*@rpx 0;
		.route-list{
			.item{
				width:100%;
				padding-left:0;
				margin-bottom:50*@rpx;
				.item-img{
					position:static;
					width:100%;
					max-width:none;
					img{width:100%;}
				}
				.text-area{
					padding-left:0;
					padding-top:60px;
					margin-top:-60px;	
					.text-area-inner{
						padding:36*@rpx 40*@rpx;
					}
				}
				.title{font-size:22px;}
				.describe{
					.text-overflow-lines(2, 1.75em);
				}
				.tag{
					@lineHeight:18px;
					font-size:14px;
					padding-left:1.6em;
					line-height:@lineHeight;
					&::before{
						font-size:@lineHeight;
					}
				}
				.route-price{
					.price{font-size:30px;}
					.small{font-size:14px;}
				}
			}
		}
	}
}

//»ÃµÆÆ¬Í·²¿
.com-banner-swiper{
	width:100%;
	position:relative;
	.banner-cover{
		position:absolute;
		top:50%;
		left:50%;
		z-index:99;
		padding:56px;
		background-color:rgba(0, 0, 0, 0.25);
		font-size:16px;
		color:#fff;
		.translate3d(-50%,-50%,0);
		.zh-name{font-weight:normal; font-size:78px; line-height:1.2;}
		.en-name{font-weight:normal; font-size:30px; margin-bottom:0.5em;}
	}
	.swiper-slide{
		font-size:0;
		line-height:0;
	}
	.swiper-tip{
		width:100%;
		position:absolute;
		bottom:0;
		left:0;
		z-index:9;
		text-align:center;
		padding:80px 0 40px 0;
		.gradient-vertical(@start-color:rgba(0,0,0,0), @end-color:rgba(0,0,0,0.5), @start-percent: 0%, @end-percent:100%);
		.swiper-tip-inner{
			display:inline-block;
		}
	}
	.swiper-pagination{
		position:static;
		width:auto;
		display:inline-block;
		padding-left:1em;
		padding-right:1em;
		font-size:14px;
		line-height:0;
		float:left;
		.swiper-pagination-bullet{
			width:3px;
			height:3px;
			margin:0 5px;
			text-indent:-999em;
			background-color:#fff;
			opacity:1;
			&.swiper-pagination-bullet-active{
				text-indent:0;
				font-size:16px;
				line-height:30px;
				width:auto;
				height:30px;
				background-color:transparent;
				color:#fff;
				border-bottom:3px solid #fff;
				.border-radius(0);
				font-family:'Conv_Oswald-Regular','Microsoft YaHei';
			}
		}
	}
	.fleet-button-prev,.fleet-button-next{
		float:left;
		display:inline-block;
		color:#fff;
		cursor:pointer;
		text-align:center;
		i{font-size:30px;}
		&.swiper-button-disabled{
			opacity:0.5;
		}
	}
	@media screen and (max-width:1680px){
		.banner-cover{
			font-size:16px;
			padding:50px;
			.zh-name{font-size:60px;}
			.en-name{font-size:28px;}
		}
	}
	@media screen and (max-width:1366px){
		.banner-cover{
			font-size:14px;
			padding:40px;
			.zh-name{font-size:48px;}
			.en-name{font-size:24px;}
		}
		.swiper-tip{padding:70px 0 20px 0;}
	}
	@media screen and (max-width:1024px){
		.banner-cover{
			padding:30px;
			.zh-name{font-size:36px;}
			.en-name{font-size:18px;}
		}
	}
	@media screen and (max-width:992px){
		.banner-cover{
			width:50%;
			.zh-name{font-size:40px;}
			.en-name{font-size:20px;}
			.introduce{
				br{display:none;}
			}
		}
		.swiper-tip{padding:60px 0 10px 0;}
	}
	@media screen and (max-width:768px){
		.banner-cover{
			top:40%;
			padding:1.5em;
			.zh-name{font-size:20px;}
			.en-name{font-size:14px; margin-bottom:0;}
			.introduce{display:none;}
		}
		.swiper-tip{
			text-align:right;
			padding-right:1em;
		}
	}
}

//ÇÐ»»
.com-switch{
	.switch-nav{
		background-color:@red;
		.nav-item{
			position:relative;
			background-color:#bdbdbd;
			float:left;
			color:#fff;
			text-align:center;
			cursor:pointer;
			i{
				font-size:52px;
				display:block;
			}
			&::before{
				@size:10px;
				content:'';
				display:none;
				width:0;
				height:0;
				border:@size solid transparent;
				border-bottom-color:#fff;
				position:absolute;
				bottom:0;
				left:50%;
				margin-left:-@size;
			}
			&.nav-item-active{
				background-color:@red;
				&::before{display:block;}
			}
		}
	}
	.switch-content{
		.content-item{
			display:none;
			&.content-item-show{display:block;}
		}
	}
	@media screen and (max-width:768px){
		.switch-nav{
			.nav-item{
				&::before{
					@size:10*@rpx;
					border:@size solid transparent;
					border-bottom-color:#fff;
					margin-left:-@size;
				}
			}
		}
	}
}

//Ò³Ãæbanner
.com-page-banner{
	background:url(../images/example/adventure_banner.jpg) center center no-repeat;
	background-size:cover;
	color:#fff;
	padding:100px 0;
	font-size:16px;
	.banner-title{
		font-size:50px;
		font-weight:normal;
		line-height:1.5;
	}
	.banner-title-small{
		font-size:32px;
		font-weight:normal;
		line-height:1.25;
		margin-bottom:0.3em;
	}
	@media screen and (max-width:1366px){
		.banner-title{font-size:48px;}
		.banner-title-small{font-size:30px;}
	}
	@media screen and (max-width:1270px){
		padding:90px 0;
		.banner-title{font-size:42px;}
		.banner-title-small{font-size:28px;}
	}
	@media screen and (max-width:1024px){
		font-size:14px;
		padding:80px 0;
		.banner-title{font-size:40px;}
		.banner-title-small{font-size:26px;}
	}
	@media screen and (max-width:768px){
		padding:100*@rpx 0;
		br{display:none;}
		p{text-align:left;}
		.banner-title{font-size:36px;}
		.banner-title-small{font-size:24px;}
	}
	@media screen and (max-width:640px){
		.banner-title{font-size:28px;}
		.banner-title-small{font-size:18px;}
	}
}

//ÎÄÍ¼ÁÐ±í
.com-list{
	.list-item{
		padding:46px 0;
		border-bottom:1px  solid #e5e5e5;
		&:last-child{border-bottom:none;}
		.img-box{
			width:500/1170*100%;
			padding-right:32px;
			font-size:0;
			line-height:0;
			.img-link{display:block;}
		}
		.text-area{
			width:670/1170*100%;
			&.text-area-full{width:100%;}
		}
		.item-title{
			font-size:24px;
			.text-overflow;
			line-height:1;
			margin-bottom:0;
			font-weight:normal;
			a{
				color:#333;
				&:hover{color:@red; text-decoration:none;}
			}
		}
		.item-tags{
			font-size:14px;
			padding:1em 0;
			color:#999;
			.tag{padding-right:1em;}
		}
		.item-introduce{
			color:#666;
			font-size:16px;
			line-height:1.625;
			margin-bottom:1em;
			.text-overflow-lines(@line-num:3, @line-height:1.625em);
		}
		.out-link-o{
			display:inline-block;
			font-size:36px;
			padding:0.1em 1em;
			line-height:1;
			border:2px solid #ccc;
			color:#ccc;
			i{line-height:1;}
			.border-radius(2em);
			&:hover{
				background-color:@red;
				color:#fff;
				border-color:@red;
			}
		}
	}
	@media screen and (max-width:1270px){
		.list-item{
			padding:40px 0;
			.img-box{
				width:500/1170*100%;
				padding-right:30px;
			}
			.text-area{
				width:670/1170*100%;
			}
			.item-title{font-size:24px;}
			.item-tags{padding:0.9em 0;}
			.item-introduce{font-size:14px;}
			.out-link-o{font-size:30px;}
		}
	}
	@media screen and (max-width:1024px){
		.list-item{
			padding:30px 0;
			.img-box{
				width:500/1170*100%;
				padding-right:30px;
			}
			.text-area{
				width:670/1170*100%;
			}
			.item-title{font-size:22px;}
			.item-tags{padding:0.7em 0;}
			.item-introduce{margin-bottom:0.8em;}
			.out-link-o{font-size:26px;}
		}
	}
	@media screen and (max-width:768px){
		.list-item{
			padding:28px 0;
			.img-box{
				width:100%/2;
				padding-right:20px;
			}
			.text-area{width:100%/2;}
			.item-title{font-size:20px;}
			.item-introduce{.text-overflow-lines(@line-num:2, @line-height:1.625em);}
			.out-link-o{font-size:26px;}
		}
	}
	@media screen and (max-width:640px){
		.list-item{
			padding:30*@rpx 0;
			.img-box{
				width:100%;
				padding-right:0;
				padding-bottom:30*@rpx;
				.img-link{img{width:100%;}}
			}
			.text-area{width:100%;}
			.item-title{font-size:20px;}
			.item-introduce{.text-overflow-lines(@line-num:3, @line-height:1.625em);}
			.out-link-o{font-size:24px;}
		}
	}
}

//ÌåÑéÁÐ±í
.exp-list{
	.img-link{display:block;}
	//µãÔÞ°´Å¥
	.btn-thumb{
		padding:0.2em 0.8em;
		color:#fff;
		font-size:30px;
		line-height:1;
		border:0;
		i{font-size:30px;}
		.border-radius(2em);
		background-color:rgba(0, 0, 0, 0.3);
		.thumb-num{padding-left:0.2em;}
		&:hover,&.active{
			color:#fff;
			background-color:@red;
		}
		@media screen and (max-width:1270px){
			font-size:28px;
			i{font-size:28px;}
		}
		@media screen and (max-width:1024px){
			font-size:24px;
			i{font-size:24px;}
		}
		@media screen and (max-width:768px){
			font-size:22px;
			i{font-size:22px;}
		}
	}
	margin-left:-15px;
	margin-right:-15px;
	.item{
		width:100%/2;
		padding:0 15px;
		float:left;
		margin-bottom:60px;
		.img-box{
			position:relative;
			.btn-thumb{
				position:absolute;
				top:20px;
				right:20px;
				z-index:9;
			}
		}
		.text-area{
			width:430/570*100%;
			margin-left:auto;
			margin-right:auto;
			padding:30px;
			background-color: #fff;
			box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
			margin-top:-70px;
			position:relative;
			z-index:9;
			.item-title{
				font-size:28px;
				font-weight:normal;
				margin-bottom:0.5em;
				.text-overflow;
			}
			p{
				font-size:16px;
				color:#666;
			}
			.excerpt{line-height:1.5; .text-overflow-lines(@line-num:3, @line-height:1.5em)}
			.tags{
				font-size:14px;
				padding:1em 0;
				i{font-size:18px; padding-right:0.2em;}
				.tag{padding-right:0.5em;}
			}
			.link{
				display:inline-block;
				padding:0.5em 2em;
				color:#fff;
				font-size:16px;
				background-color:@red;
				&:hover{
					text-decoration:none;
					background-color:darken(@red, 5%);
				}
			}
		}
	}
	@media screen and (max-width:1270px){
		.item{
			margin-bottom:50px;
			.text-area{
				width:430/570*100%;
				margin-top:-50px;
				.item-title{font-size:26px;}
				p{font-size:16px;}
			}
		}
	}
	@media screen and (max-width:1024px){
		margin-left:-10px;
		margin-right:-10px;
		.item{
			margin-bottom:40px;
			padding:0 10px;
			.img-box{
				.btn-thumb{
					top:15px;
					right:15px;
				}
			}
			.text-area{
				width:430/570*100%;
				margin-top:-50px;
				.item-title{font-size:24px;}
				p{font-size:14px;}
				.link{font-size:14px;}
				.tags{
					.tag{display:block; margin-bottom:0.5em;}
				}
			}
		}
	}
	@media screen and (max-width:768px){
		.item{
			margin-bottom:40px;
			padding:0 10px;
			.img-box{
				.btn-thumb{
					top:10px;
					right:10px;
				}
			}
			.text-area{width:500/570*100%;}
		}
	}
	@media screen and (max-width:640px){
		margin-left:0;
		margin-right:0;
		.item{
			width:100%;
			padding:0;
			.img-link{img{width:100%; max-width:auto;}}
			.text-area{
				width:500/570*100%;
				.item-title{font-size:22px;}
				.tags{margin-bottom:0;}
				.excerpt{margin-bottom:0; .text-overflow-lines(@line-num:2, @line-height:1.5em)}
			}
		}
	}
}


//ÌáÊ¾ºÐ
.com-tip-box{
	display:block;
	cursor:pointer;
	position:relative;
	.com-tip-icon{
		@size:10px;
		position:absolute;
		right:0;
		bottom:0;
		display:block;
		text-align:center;
		padding:@size*2 @size @size @size*2;
		font-size:22px;
		line-height:1;
		color:#333;
		border-top-left-radius:100%;
		i{font-size:22px;}
		background-color:rgba(255, 255, 255, 0.8);
		&.com-tip-icon-video{
			@size:54px;
			display:block;
			width:@size;
			height:@size;
			padding:0;
			top:50%;
			left:50%;
			right:inherit;
			bottom:inherit;
			color:#515151;
			line-height:1;
			background-color:#fff;
			i{font-size:20px; line-height:@size;}
			.border-radius(50%);
			margin-top:-27px;
			margin-left:-27px;
		}
	}
	@media screen and (max-width:1270px){
		
	}
}


//Ïò×óïÎ¿Õ°´Å¥
.btn-icon-o{
	@size:36px;
	padding:0.1em 1em;
	font-size:@size;
	text-align:center;
	border:2px solid #ccc;
	color:#ccc;
	line-height:0;
	display:inline-block;
	.border-radius(2em);
	i{font-size:@size; line-height:1;}
	&:hover{
		background-color:@red;
		color:#fff;
		border-color:@red;
	}
	@media screen and (max-width:1270px){
		@size:34px;
		i{font-size:@size;}
	}
	@media screen and (max-width:1024px){
		@size:30px;
		padding:0 0.8em;
		i{font-size:@size;}
	}
}

//·ÖÏí
.share-box{
	display:inline-block;
	position:relative;
	.share-btn{
		color: #fff;
		font-size: 24px;
		padding: 0.4em 1em;
		border: 0;
		border-radius: 2em;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.2);
		i{font-size:24px;}
		&.share-btn-white{
			border: 0;
			border-radius: 3em;
			line-height: 1;
			font-size: 24px;
			padding: 0.3em 1.5em;
			border: 2px solid #fff;
			background-color: transparent;
			color: rgba(255, 255, 255, 0.9);
			&:hover{
				background-color:#fff;
				color:@red;
			}
		}
		&.share-btn-white-small{
			border: 2px solid rgba(255, 255, 255, 0.9);
			padding: 0.5em 1.5em;
			color: #fff;
			font-size:14px;
			background-color: transparent;
			border-radius: 2em;
			&:hover{
				background-color:#fff;
				color:@red;
			}
		}
	}
	.share_box{
		position:absolute;
		top:44px;
		right:0;
		display:none;
		text-align:right;
		line-height:0;
		font-size:0;
		&::before{
			@size:8px;
			content:'';
			display:inline-block;
			width:0;
			height:0;
			border:@size solid transparent;
			border-bottom-color:#fff;
			margin-right:19px;
			z-index:9;
		}
		&.share_box_top{
			top:inherit;
			bottom:42px;
			&::before{display:none;}
			&::after{
				@size:8px;
				content:'';
				display:inline-block;
				width:0;
				height:0;
				border:@size solid transparent;
				border-top-color:#fff;
				margin-right:19px;
				z-index:9;
			}
		}
		.bdsharebuttonbox{
			.border-radius(5px);
			overflow:hidden;
			width:53px*4;
			background-color:#fff;
			.clearfix();
			.box-shadow(2.5px 4.33px 24px 6px rgba(46, 46, 46, 0.1));
			a{
				display:block;
				width:53px;
				height:45px;
				padding:6px 10px;
				float:left;
				cursor:pointer;
				position:relative;
				margin:0;
				background:#fff url(../images/icon_weixin.png) center center no-repeat;
				&.bds_weixin{background-image:url(../images/icon_weixin.png)}
				&.bds_tsina{background-image:url(../images/icon_tsina.png)}
				&.bds_sqq{background-image:url(../images/icon_sqq.png)}
				&.bds_qzone{background-image:url(../images/icon_qzone.png)}
				&::after{
					content:'';
					width:0;
					position:absolute;
					top:6px;
					right:0;
					height:33px;
					border-right:1px solid #d9d9d9;
				}
				&:last-child{&::after{display:none;}}
				&:hover{
					background-color:#ebebeb;
				}
			}
		}
	}
	&:hover{
		.share_box{display:block;}
		.share-btn.share-btn-white{
			background-color:#fff;
			color:@red;
		}
	}
	@media screen and (max-width:1366px){
		.share-btn{
			&.share-btn-white-small{
				i{font-size:22px;}
			}
		}
		.share_box{
			&.share_box_top{
				bottom:40px;
			}
		}
	}
	@media screen and (max-width:1270px){
		.share-btn{font-size: 22px;}
		.share_box{top:40px; }
	}
	@media screen and (max-width:768px){
		&.share-box-peer{
			width:45%;
			margin-left:3%;
			.share-btn-white{
				width:100%;
			    float: left;
			    display: block;
			    font-size: 18px;
			    line-height: 1;
			    padding: 0.3em 1em;
			}
		}
	}
}

